<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.FigureDocSettings.classProperty')"
    @register="register"
    @ok="handleSubmit"
    :destroyOnClose="true"
    :minHeight="500"
    :width="1200"
  >
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> {{ t('common.create') }} </a-button>
      </template>
      <!-- 控件 -->
      <template #attr="{ text: attr }">
        {{ proxy.$filters.filterFormControlType(attr) }}
      </template>
      <!-- 是否允许为空 -->
      <template #pdmnull="{ text: pdmnull }">
        {{ pdmnull === '1' || pdmnull === true ? t('common.yes') : t('common.no') }}
      </template>
      <!-- 是否为敏感属性 -->
      <template #isOnly="{ text: isOnly }">
        {{ isOnly === '1' || isOnly === true ? t('common.yes') : t('common.no') }}
      </template>
      <!-- 是否为默认属性 -->
      <template #canChange="{ text: canChange }">
        {{ canChange === '0' || canChange === true ? t('common.yes') : t('common.no') }}
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              popConfirm: {
                title: t('common.confirmDelete'),
                confirm: handleDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
  </BasicModal>
  <!-- 类属性弹窗 -->
  <ClassPropertyModal @register="registerClassPropertyModal" @success="reload()" />
</template>

<script lang="ts" setup>
  import { ref, getCurrentInstance } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getFileTypeTable } from '/@/api/demo/system';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getClassAttrModalColumns } from './data';
  import { deleteDocType } from '/@/api/demo/system';

  import ClassPropertyModal from '../partSetting/classPropertyModal.vue';

  const { t } = useI18n();
  const { createMessage } = useMessage();
  const { proxy }: any = getCurrentInstance();
  const getClassId = ref<string>('');

  // 提交
  const handleSubmit = async () => {
    closeModal();
  };

  // 新增
  const handleCreate = () => {
    openModalClassPropertyModal(true, {
      isUpdate: false,
      docTypeId: getClassId.value,
      newIndex: Number(getDataSource()[getDataSource().length - 1].dispIndex) + 1,
      tableData: getDataSource(),
      type: '类属性',
    });
  };

  // 修改
  const handleEdit = (record: Recordable) => {
    openModalClassPropertyModal(true, {
      isUpdate: true,
      record: record,
      docTypeId: getClassId.value,
      tableData: getDataSource(),
      type: '类属性',
    });
  };

  // 删除
  const handleDelete = (record: Recordable) => {
    if (record.canChange === '0') {
      createMessage.warning(t('routes.demo.FigureDocSettings.basicProperty'));
    } else {
      deleteDocType(record.docTypeId, record.prop, record.dispIndex).then((res) => {
        if (res) {
          createMessage.success(t('common.delSuccessText'));
          reload();
        }
      });
    }
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    getClassId.value = data.id;
  });

  // 初始化类属性表格
  const [registerTable, { reload, getDataSource }] = useTable({
    titleHelpMessage: 'DocSetClassAttr',
    api: getFileTypeTable,
    beforeFetch: () => {
      return getClassId.value;
    },
    fetchSetting: {
      // 接口返回的表单数据字段名称
      listField: 'listDocQuality',
    },
    columns: getClassAttrModalColumns(),
    showTableSetting: true,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
    actionColumn: {
      width: 80,
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });

  // 类属性弹窗
  const [registerClassPropertyModal, { openModal: openModalClassPropertyModal }] = useModal();
</script>
